@import 'assets/stylesheets/gutenberg-base-styles';

.onboarding-block__questions {
	.onboarding-block__question {
		.vertical-select {
			width: 400px;
			margin-left: 0.2em;
			border-bottom: 3px solid transparent;

			& > input.onboarding-block__question-input {
				width: inherit;
				color: var( --mainColor );
				margin: 0;
				margin-left: 0; // zeroing this out to inherit the parent's width and not overflow
			}

			.suggestions {
				position: fixed;
				color: var( --studio-blue-40 );
				width: inherit;
				max-width: 300px;
				min-width: 200px;
				max-height: 240px;
				margin-left: 0;
				background: transparent;
				overflow: auto;
				border: 0;
			}

			.suggestions__category-heading {
				display: none;
			}

			.suggestions__item {
				font-size: 12px;
				font-weight: bold;
				border-color: transparent;
				color: var( --studio-gray-20 );

				.suggestions__label.is-emphasized {
					color: var( --studio-gray-80 );
				}

				&:focus,
				&:active {
					.suggestions__label.is-emphasized {
						color: var( --studio-gray-80 );
					}
				}
			}

			.vertical-select__sugestion {
				position: fixed;
			}
		}
	}
}
